@import url('../../utils/less/base.less');

.page {
    &>.nav {
        .sticky(0);
        z-index: 1;
    }

    &>.page-container {
        &>.reason {
            .bgcolor(#fff);
            .radius(10rpx);
            line-height: 1.7;
            margin: 28rpx;
            padding: 10rpx 24rpx;
            letter-spacing: 2rpx;

            &>.title {
                .text(36rpx, bold);

                &>.ptname {
                    .text(#1e98d7);
                }
            }

            &>.item {
                .text(#555);
            }
        }

        &>.mechanism {
            .flex-start();
            padding: 0 28rpx;
            letter-spacing: 2rpx;

            &>.item {
                .flex(auto);
                .bgcolor(white);
                .text(center);
                .radius(10rpx);
                padding: 20rpx;
                line-height: 1.7;

                &>.title {
                    .text(36rpx, bold);
                }

                &>.desc {
                    .text(#555);
                }
            }

            &>.item:first-child {
                margin-right: 28rpx;
            }
        }

        &>.perfect {
            .bgcolor(white);
            .overflow-auto();
            .radius(10rpx);
            margin: 28rpx;

            &>.title {
                .text(36rpx, bold);
                padding: 28rpx;
            }

            &>.process {
                .flex-between(center);
                .text(32rpx, #1382bb);
                padding: 0 28rpx 28rpx;
            }

            &>.forms {
                .bgcolor(#f3f5f9);
                .radius(10rpx);
                margin: 0 28rpx 20rpx;

                &>.form {
                    .overflow-auto();

                    &>.item {
                        margin: 30rpx 28rpx;

                        &>.title {
                            .text(32rpx, bold);
                        }

                        &>.input-row {
                            margin-top: 16rpx;

                            &>.input {
                                .radius(10rpx);
                                .bgcolor(#fff);
                                padding: 12rpx 16rpx;
                                border: 1px solid #999;
                            }

                            &>.phone-input {
                                .flex-start(center);

                                &>.input {
                                    .radius(10rpx);
                                    .bgcolor(#fff);
                                    .flex(auto);
                                    padding: 12rpx 16rpx;
                                    border: 1px solid #999;
                                }

                                &>.getphonebutton {
                                    .flex(none);
                                    .bgcolor(#1e98d7);
                                    .text(28rpx, weightnormal, white);
                                    color: #fff;
                                    box-sizing: content-box;
                                    border: 1px solid #fff;
                                    height: 1.4rem;
                                    line-height: 1.4rem;
                                    width: auto;
                                    padding: 12rpx 20rpx;
                                    margin-left: 28rpx;
                                }
                            }

                            &>.radio {
                                .flex-start(center);

                                &>.label {
                                    .flex-start(center);

                                    &>.label-text {
                                        margin-right: 30rpx;
                                    }

                                    & .radio-circle {
                                        transform: scale(.8);
                                    }
                                }
                            }

                            &>.picker {
                                & .picker-row {
                                    .radius(10rpx);
                                    .flex-between(center);
                                    .bgcolor(#fff);
                                    height: 1.4rem;
                                    border: 1px solid #999;
                                    padding: 12rpx 16rpx;

                                    &>.right-arround {
                                        width: 16rpx;
                                        height: 16rpx;
                                        border-bottom: 4rpx solid #666;
                                        border-right: 4rpx solid #666;
                                        transform: rotate(45deg) translate(-25%);
                                    }
                                }
                            }

                            &>.multi-select {
                                .radius(10rpx);
                                .flex-between(center);
                                .bgcolor(#fff);
                                height: 1.4rem;
                                padding: 12rpx 0 12rpx 16rpx;
                                border: 1px solid #999;

                                &>.multi-input {
                                    .flex(auto);
                                }

                                &>.right-arround {
                                    .flex(none, stretch);
                                    padding: 8rpx 20rpx 10rpx 16rpx;

                                    &::after {
                                        content: '';
                                        display: block;
                                        width: 16rpx;
                                        height: 16rpx;
                                        border-bottom: 4rpx solid #666;
                                        border-right: 4rpx solid #666;
                                        transform: rotate(45deg);
                                    }
                                }
                            }
                        }
                    }

                    &>.idver {
                        .flex-start(center);
                        margin: 40rpx 28rpx;

                        &>.front {
                            .flex-start(center, col, auto);

                            &>.img-icon {
                                width: 200rpx;
                                height: auto;
                                margin-bottom: 30rpx;
                            }

                            &>.img {
                                .bgimg(contain, norepeat, center);
                                .radius(10rpx);
                                width: 180rpx;
                                height: 180rpx;
                                border: 1px solid #888;
                                margin-bottom: 30rpx;
                            }
                        }

                        &>.back {
                            .flex-start(center, col, auto);

                            &>.img-icon {
                                width: 200rpx;
                                height: auto;
                                margin-bottom: 30rpx;
                            }

                            &>.img {
                                .bgimg(contain, norepeat, center);
                                .radius(10rpx);
                                width: 180rpx;
                                height: 180rpx;
                                border: 1px solid #888;
                                margin-bottom: 30rpx;
                            }
                        }
                    }

                    &>.tipmsg {
                        .text(center, red);
                        margin: 60rpx 28rpx 20rpx;
                    }

                    &>.step {
                        .flex-between();
                        margin: 20rpx 28rpx 40rpx;

                        &>.next {
                            .text(center, #fff, 32rpx);
                            .bgcolor(#1e98d7);
                            .radius(100rpx);
                            padding: 20rpx 44rpx;
                        }

                        &>.prev {
                            .text(center, 32rpx);
                            .bgcolor(#fff);
                            .radius(100rpx);
                            border: 1px solid #aaa;
                            padding: 20rpx 44rpx;
                        }
                    }
                }
            }
        }
    }

    & .pop-container {
        .bgcolor(white);

        &>.title {
            .text(center, 36rpx);
            padding: 30rpx;
        }

        &>.items {
            .overflow-auto();
            max-height: 70vh;

            &>.groups {
                &>.group-title {
                    .text(30rpx, center);
                    padding: 20rpx 0;
                }

                &>.item {
                    .flex-start(wrap);
                    padding: 14rpx 28rpx;

                    &>.i {
                        .radius(100rpx);
                        border: 1px solid #666;
                        padding: 14rpx 26rpx;
                        margin: 14rpx 16rpx;
                    }
                }
            }

            &>.btn {
                .bgcolor(#1e98d7);
                .text(#fff, center, 32rpx);
                .radius(100rpx);
                padding: 28rpx 0;
                margin: 28rpx;
            }
        }
    }

    & .pop-container-qrcode {
        .flex-center(center, col);
        .bgcolor(white);
        height: 50vh;

        &>.qrcode {
            width: 400rpx;
            height: auto;
            margin: 30rpx 0 20rpx;
        }

        &>.title {
            .text(36rpx; )
        }
    }
}